<template>
	<!-- 搜索栏 -->
	<view>
		<view class="w-full h-[7vh]"
			><nut-searchbar
				placeholder="搜索皂方名称"
				v-model="searchParam"
				@clear="search"
				@blur="search"
				@tap-right-icon="search"
				shape="square"
				><template #rightin> <Search2 /> </template></nut-searchbar
		></view>
	</view>
	<scroll-view scroll-y @scrolltolower="handleScrollToLower">
		<view v-for="(item, index) in list" :key="index">
			<view class="reference_item" @tap="goDetail(item)">
				<image
					class="w-[20vw] h-[20vw] rounded-md"
					:src="item.imgUrl"
				/>
				<view class="w-[80%] ml-4">
					<view>{{ item.name }}</view>
					<view class="text-[#999] text-sm"
						>功能：{{ item.function }}</view
					>
				</view>
			</view>
		</view>
	</scroll-view>
</template>
<script setup lang="ts">
import BigNumber from 'bignumber.js';
import { data } from './data';
import Taro, { useLoad } from '@tarojs/taro';
import { Search2 } from '@nutui/icons-vue-taro';
import { ref, onMounted } from 'vue';

const searchParam = ref('');
const search = (val: string) => {
	searchParam.value = val;
	console.log(val);
	// 过滤出匹配到的皂名中文
	list.value = data.filter((item) => item.name.includes(val));
};

const list = ref([] as any[]);
const loading = ref(false);
const hasMore = ref(true);
const page = ref(1);

const goDetail = (item) => {
	console.log(item, 'detail');
	// const data = {
	// 	totalOilWeight: 500,
	// 	NaOHPurity: 100,
	// 	water: 2,
	// 	substractNaOH: 0,
	// 	remark: '',
	// 	oilLists: [
	// 		{ name: '橄榄油', weight: 200, INS: 100, proportion: 50 },
	// 		{ name: '椰子油', weight: 200, INS: 100, proportion: 50 },
	// 		{ name: '棕榈油', weight: 100, INS: 100 },
	// 	],
	// 	otherLists: [
	// 		{ name: '蜂蜜', weight: 20 },
	// 		{ name: '玫瑰精油', weight: 20 },
	// 	],
	// 	activeTab: 2,
	// 	NaOHWeight: 90,
	// 	waterWeight: 180,
	// 	otherWeight: 30,
	// 	totalINS: 120,
	// 	totalWeight: 800,
	// 	type: 'solid',
	// 	hideButton: true,
	// };

	// 计算每种油的比例
	let tempTotalOilWeight = item.oilLists.reduce(
		(pre: BigNumber, cur: any) => pre.plus(cur.weight || 0),
		new BigNumber(0)
	);
	const tempOilList = item.oilLists.map((v) => {
		return {
			...v,
			// 根据重量算比例
			proportion: new BigNumber(v.weight)
				.dividedBy(tempTotalOilWeight)
				.multipliedBy(100)
				.toFixed(2),
		};
	});

	const data = {
		...item,
		oilLists: tempOilList,
	};

	Taro.navigateTo({
		url: `/pages/referenceFormula/index?obj=${encodeURIComponent(
			JSON.stringify(data)
		)}`,
	});
};
// 模拟接口请求
const fetchData = async (page) => {
	list.value = data;
	// list.value = [
	// 	{
	// 		name: '玫瑰精油皂',
	// 		function: '滋润保湿，提亮肤色，适合干性肌肤',
	// 		imgUrl: 'https://ts1.cn.mm.bing.net/th/id/R-C.4186be6ea8380b2daa1df2cc7edf79bc?rik=Tt3WHyso%2bCKj5A&riu=http%3a%2f%2fwww.esliteoem.com%2fimg%2fproduct%2f18f72_88520170207020907.jpg_400x400.jpg&ehk=Qf4JXsgopP40nJ3dHu1RzxQTVpZEWYo12GyxIuZaiEM%3d&risl=&pid=ImgRaw&r=0',
	// 		remark: '',
	// 		oilList: [
	// 			{
	// 				name: '玫瑰油',
	// 				weight: 100,
	// 			},
	// 		],
	// 		otherList: [
	// 			{
	// 				name: '玫瑰精油',
	// 				weight: 20,
	// 			},
	// 		],
	// 		waterWeight: 180,
	// 		NaOHWeight: 90,
	// 	},
	// 	{
	// 		name: '抹茶薄荷皂',
	// 		function: '清爽控油，深层清洁，适合油性肌肤',
	// 		imgUrl: 'https://ibb.co/mFD4K1RH',
	// 	},
	// 	{
	// 		name: '薰衣草皂',
	// 		function: '舒缓镇静，修复肌肤，适合敏感肌肤',
	// 		imgUrl: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.5pVxX_Cg2UgdRygNvXcD2QHaE8?rs=1&pid=ImgDetMain',
	// 	},
	// ];

	// loading.value = true;
	// const res = await new Promise((resolve) => {
	// 	setTimeout(() => {
	// 		resolve({
	// 			data: Array.from({ length: 10 }, (_, i) => ({
	// 				id: (page - 1) * 10 + i + 1, // 假设每条数据有一个唯一 id
	// 				text: `Item ${(page - 1) * 10 + i + 1}`,
	// 			})),
	// 		});
	// 	}, 1000);
	// });

	// if (res.data.length > 0) {
	// 	// 去重逻辑：过滤掉已经存在于 list 中的数据
	// 	const newData = res.data.filter(
	// 		(newItem) => !list.value.some((item) => item.id === newItem.id)
	// 	);

	// 	// 如果有新数据，追加到列表中
	// 	if (newData.length > 0) {
	// 		list.value = [...list.value, ...newData];
	// 		page.value += 1;
	// 	} else {
	// 		// 如果没有新数据，说明已经加载完了
	// 		hasMore.value = false;
	// 	}
	// } else {
	// 	// 如果接口返回空数据，说明没有更多数据了
	// 	hasMore.value = false;
	// }
	// loading.value = false;
};

// 初始化加载第一页数据
onMounted(() => {
	fetchData(1);
});

// 滚动到底部加载更多
const handleScrollToLower = () => {
	if (!loading.value && hasMore.value) {
		fetchData(page.value);
	}
};
</script>
<style lang="scss">
.reference_item {
	width: 100%;
	height: 200px;
	padding: 10px 30px;
	display: flex;
	align-items: center;
	border-radius: 24rpx;
	margin-bottom: 16rpx;
	background-color: #fff;
}
</style>
